<template>
    <div class="equipment-move-box box-empty">
        <div class="return click-pointer" @click="onReturn">返回</div>
        <div class="equipment-move" style="margin-top: 15px">
            <div class="move-title" style="margin-bottom: 10px">图片列表</div>
            <publicTable
                :columnData="imgMessageColumn"
                :tableData="tableData"
                :maxWidth="true"
                style="width: 100%; height: 100%; flex-grow: 0.5"
                v-loading="loading"
            />
            <el-pagination
                background
                layout="prev, pager, next"
                :total="paging"
                :current-page="params.paged"
                @current-change="handleChange"
            />
            <delet-dialog
                :dialogVisible.sync="deletDialogVisible"
                @submit="deletSave"
                :formData="{
                    title: '提示',
                    cancelBtn: '取消',
                    saveBtn: '确定',
                    message: '是否要删除',
                }"
            />
        </div>
    </div>
</template>

<script>
import {imgMessageColumn} from '@/utils/column';
import publicTable from '@/components/publicTable';
import deletDialog from '@/components/deletDialog';
import {imgList, imgDelete} from '@/utils/api.js';
export default {
    name: 'imgMessage',
    components: {publicTable, deletDialog},
    data() {
        return {
            paging: 10,
            deletId: '',
            pagedId: '',
            params: {
                // scene_id: '29',
                scene_id: '57',
                name: '',
                paged: 1,
                pageSize: 10,
            },
            imgMessageColumn,
            loading: true,
            tableData: [],
            deletDialogVisible: false,
            deleteId: '',
        };
    },
    methods: {
        //点击分页
        handleChange(e) {
            this.params.paged = e;
            this.imgListApi(e);
        },
        //返回
        onReturn() {
            this.$router.go(-1);
        },
        //图片列表
        imgListApi(id, val = 1) {
            this.tableData = [];
            imgList({add_id: id}, val)
                .then(res => {
                    this.tableData = res.data.data.map((it, index) => {
                        let i = (val - 1) * 10 + index + 1;
                        return {
                            indexId: i,
                            test: this.$route.query.res?.name,
                            test1: new Date(it.add_time).toLocaleString(),
                            id: it.id,
                            file_path: it.file_path,
                            fix: it.fix,
                        };
                    });
                    this.paging = res.data.totalPage * 10;
                    this.loading = false;
                })
                .catch(err => {
                    console.log('失败', err);
                    this.loading = false;
                });
        },
        //点击删除
        deleteRow(val) {
            // this.deleteId = this.deleteNews[val.test];
            this.deleteId = val.id;
            this.deletDialogVisible = true;
        },
        //点击确认删除
        deletSave() {
            this.loading = true;

            imgDelete(this.deleteId)
                .then(res => {
                    console.log(res);
                    this.imgListApi(this.pagedId, this.params.paged);
                    this.loading = false;
                })
                .catch(err => {
                    console.log('失败', err);
                    this.loading = false;
                });
            this.deletDialogVisible = false;
        },
        //点击图片
        editRow(row) {
            console.log(row, '编辑');
            let url = `http://pnwl.cn:9000/lpro/res${row.file_path}/${row.id}.${row.fix}`;
            row.img = url;
            this.$router.push({path: '/monitoring/imgShow', query: {res: row}});
        },
    },
    activated() {
        this.pagedId = this.$route.query?.res?.id;
        if (this.pagedId) {
            this.imgListApi(this.pagedId);
            console.log('==', this.pagedId, '路由ID');
        }
    },
};
</script>

<style scoped lang="scss">
/* 组件样式 */
</style>

<style scoped>
.return {
    box-shadow: inset 0px 0px 10px 0px rgba(0, 201, 255, 0.6);
    background: #03104c;
    width: 120px;
    height: 48px;
    line-height: 48px;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #3877f2;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    background-image: url('@/assets/img/fh.png');
    background-size: 24px;
    color: #ffffff;
    background-position: 10px center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
.box-empty >>> .el-pagination {
    width: 100%;
    margin-bottom: 10px;
}
.box-empty >>> .btn-prev {
    background: rgba(4, 44, 91, 0.02);
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #0e5fff;
}

.box-empty >>> .btn-next {
    background: rgba(4, 44, 91, 0.02);
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #0e5fff;
}
.box-empty >>> .number {
    background-color: rgba(4, 44, 91, 0.02) !important;
    border-radius: 5px 5px 5px 5px !important;
    border: 1px solid #0e5fff !important;
    color: #bdc2ca !important;
}
.box-empty >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #409eff !important;
    color: #fff !important;
}
.equipment-move {
    position: relative;
    background-image: url('@/assets/img/atlas-message.png');
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 5003;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}
/* 整个滚动条 */
::-webkit-scrollbar {
    width: 4px; /* 设置滚动条的宽度 */
    height: 12px; /* 设置水平滚动条的高度（如果需要） */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #000000; /* 轨迹的颜色 */
    border-radius: 6px; /* 轨迹的圆角 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background-color: #395ee2; /* 滑块的颜色 */
    border-radius: 2px; /* 滑块的圆角 */
}

/* 滚动条滑块悬停 */
::-webkit-scrollbar-thumb:hover {
    background-color: #000000; /* 悬停时的颜色 */
}
</style>
